<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 140px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="summary">
            <div class="summary-list" v-for="(name, key) in totalFields" :key="key">
                <span>{{ tableData[key] }}</span>
                <el-divider></el-divider>
                {{ name }}
            </div>
            <br>
            <div class="summary-list" v-for="(name, key) in totalFields2" :key="key">
                <span>{{ tableData[key] }}</span>
                <el-divider></el-divider>
                {{ name }}
            </div>
        </div>
        <el-divider></el-divider>
        <div class="room-full">
            <ul>
                <li v-for="(item, index) in tableData.sceneProfits" :key="index">
                    <div>{{ item.gameName }}</div>
                    <div>{{ item.output }}</div>
                    <div>
                        <i class="el-icon-top color-success" v-if="item.outputChange > 0"></i>
                        <i class="el-icon-bottom color-danger" v-else-if="item.outputChange < 0"></i>
                        <i class="el-icon-video-pause" v-else></i>
                        {{ $helper.numberPercent(item.outputChange) }}
                    </div>
                </li>
            </ul>
        </div>
        <el-divider></el-divider>
        <scene-consume-bullet :day="search.day" ref="consumeChart"></scene-consume-bullet>
    </div>
</template>

<script>
import SceneConsumeBullet from './scene-consume-bullet'

export default {
    components: {
        SceneConsumeBullet,
    },
    data() {
        return {
            search: {
                day: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            totalFields: {
                pay: '总充值',
                withdraw: '总积分',
                spreadCost: '总推广费',
                stockChange: '库存变化',
                consumeBullet: '总流水',
                // platformProfit: '平台利润',
                // cashProfit: '现金利润',
            },
            totalFields2: {
                hb2bullet: '棒棒糖交换奶酪',
                freeUserStockBullet: '注册无充值用户奶酪库存',
                freeUserStockHb: '注册无充值棒棒糖库存',
            }
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/OperateTotal', filter).then(({data}) => {
                this.tableData = data.data;

                // 触发组件事件
                this.$refs.consumeChart.handleSearch();
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = moment().add(-1, 'd').format('yyyy-MM-DD');
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}


.summary {
    width: 100%;
    padding: 10px 0;
    //display: -webkit-box;
    //display: -ms-flexbox;
    //display: flex;
    //-webkit-box-orient: horizontal;
    //-webkit-box-direction: normal;
    //-ms-flex-direction: row;
    //flex-direction: row;
    //-ms-flex-wrap: nowrap;
    //flex-wrap: nowrap;
    //-webkit-box-pack: justify;
    //-ms-flex-pack: justify;
    //justify-content: space-between
}

.summary .summary-list {
    text-align: center;
    min-width: 200px;
    display: inline-block;
    margin: 10px 0;
}

.summary .summary-list span {
    font-weight: 700;
    font-size: 24px
}


.room-full ul {
    width: 30%
}

.room-full ul li {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0
}

.room-full ul li div {
    //text-align: center;
    width: 25%
}

//.room-full ul li div:nth-child(3) {
//    text-align: right;
//}


</style>

